<template>
	<view box>
		<view class='box' v-for='(item,index) in list' :key='index'>
			<view class='box-tit'>
					<view>预约类型：{{item.type}}</view>
					<view class='box-btn' v-if='item.appointmentStatus == 0'>已受理</view>
					<view class='box-btn1' v-if='item.appointmentStatus == 1'>未受理</view>
			</view>
			<view class='lineSty'></view>
			<view class='box-info'>
				<view class='box-info-value'>车牌号：{{item.carNo}}</view>
				<view class='box-info-value'>门店：{{item.storeName}}</view>
				<view class='box-info-value'>门店地址：{{item.storeAddress}} 
					<image
						@click.stop="navi(item)"
						class="icon-image"
						:src="naviImg"
						mode=""
					></image>
				</view>
				<view class='box-info-value'>预约时间：{{item.appointmentStartTime}}</view>
				<view class='box-info-value'>预约人：{{item.appointmentUser}}</view>
				<view class='box-info-value'>预约人电话号：{{item.description}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {bMapToQQMap} from '../../../util/index.js';
	import {getMaintenanceList} from '../../../common/api.js';
	
	export default {
		data() {
			return {
				naviImg:this.baseImageUrl+'uni_rental/导航_icon@2x.png',
				list:[],
			}
		},
		onLoad() {	
			this.getData();
		},
		methods: {
			getData() {
				getMaintenanceList({}).then(res => {
					console.log(res,1111111)
						if(res.length>0){
							let arr = JSON.parse(JSON.stringify(res))
							arr.map((item)=>{
								if(item.type == 1){
									item.type = '维修'
								}else if(item.type == 2){
									item.type = '保养'
								}else if(item.type == 3){
									item.type = '美容'
								}
							})
							this.list = arr
						}
						
				})
			},
			navi(info) {
				
				const qqLatLng = bMapToQQMap(info.lat, info.lon);
				
				console.log('点击了导航', qqLatLng);
			    uni.openLocation({ //​使用微信内置地图查看位置。
			        latitude: qqLatLng[0], //要去的纬度-地址
			        longitude: qqLatLng[1], //要去的经度-地址
			        name: info.storeName,
			        address: info.storeAddress,
			        success() {
			            console.log('成功了');
			        },
			        fail(msg) {
			            console.log(msg)
			        }
			    })
			},
		}
	}
</script>

<style>
	.box{
		margin:20px;
		background-color: #fff;
		border-radius: 6px;
	}
	.box-tit{
		height:40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		padding:10px;
		align-items: center;
	}
	.lineSty{
		width: 95%;
		background-color: #e5e5e5;
		height: 1px;
		margin: 0 auto;
	}
	.box-btn{
		padding: 2px 5px;
		color: #fff;
		border-radius: 2px;
		background-color: #9898ef;
		height: 20px;
		line-height: 20px;
		font-size:14px;
	}
	.box-btn1{
		padding: 2px 10px;
		color: #fff;
		border-radius: 2px;
		background-color: #b9e846;
		height: 20px;
		line-height: 20px;
		font-size:14px;
	}
	.box-info{
		padding:10px;
	}
	.box-info-value{
		height:40px;
		line-height: 40px;
		display: flex;
		align-items: center;
	}
	.navigation{
		color: blue;
		cursor: pointer;
		margin-left: 20px;
	}
	.icon-image{
		width:20px;
		height:20px;
		margin-left:10px;
	}
</style>
